<!-- 新建分类 -->

<template>
  <a-modal
    width="50%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title>
      {{
        type === 'main'
          ? '新建主类型'
          : type === 'child'
          ? '新建子类型'
          : '编辑类型'
      }}
    </template>
    <a-form auto-label-width :model="currForm.list" direction="vertical">
      <a-form-item v-if="type !== 'main'" label="父级分类：">
        <a-input disabled v-model="fName"></a-input>
      </a-form-item>
      <a-form-item label="分类名称：">
        <a-input v-model="currForm.list.name"></a-input>
      </a-form-item>
      <a-form-item label="物料/产品：">
        <a-radio-group
          :disabled="props.type === 'child'"
          v-model="currForm.list.category"
        >
          <a-radio value="物料">物料</a-radio>
          <a-radio value="成品">成品</a-radio>
          <a-radio value="半成品">半成品</a-radio>
          <a-radio value="产品">产品</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="备注：">
        <a-textarea
          allow-clear
          :auto-size="{
            minRows: 5,
          }"
          show-word-limit
          :max-length="300"
          v-model="currForm.list.remark"
        ></a-textarea>
      </a-form-item>
      <!-- <a-form-item label="显示排序">
        <a-input-number :min="1" v-model="currForm.list.code"></a-input-number>
      </a-form-item> -->
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { computed, ref, reactive, watch } from 'vue';
  import { cloneDeep } from 'lodash';

  const props = withDefaults(
    defineProps<{
      visible: boolean; // 是否显示对话框
      form?: any; // 传进来的数据
      fatherName?: string; // 父级名称
      type: string; // main child edit 分别对应新建主类型，新建子类型和编辑类型
    }>(),
    {
      visible: false,
      type: 'main',
    }
  );

  const emit = defineEmits(['update:visible', 'categoryEmit']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const fName = computed(() => props.fatherName);

  const currForm = reactive({
    list: {
      name: '',
      category: '物料',
      remark: '',
      pid: 0,
    },
  });
  watch(modalVisible, (newVal, oldVal) => {
    // 如果newVal为true
    if (newVal) {
      if (props.type === 'edit') {
        currForm.list = cloneDeep(props.form); // 判断是修改操作的弹框
      } else if (props.type === 'child') {
        // 判断是否是添加子类型
        console.log(props);
        currForm.list = cloneDeep(props.form); // 判断是修改操作的弹框
        currForm.list.name = '';
        currForm.list.category = '物料';
        currForm.list.remark = '';
      }
      // if (props.type === 'subEdit') {
      //   const { form } = props;
      //   currForm.list = cloneDeep(form);

      //   console.log(currForm.list);
      // } else if (props.type === 'subAdd') {
      //   // currForm.list
      // } else {
      //   currForm.list = {
      //     name: '',
      //     category: '物料',
      //     remark: '',
      //   };
      // }
    }
  });
  // 保存
  const handleOk = () => {
    modalVisible.value = false;
    emit('categoryEmit', currForm.list, props.type);
    currForm.list = {
      name: '',
      category: '物料',
      remark: '',
      pid: 0,
    };
  };

  // 取消
  const handleCancel = () => {
    currForm.list = {
      name: '',
      category: '物料',
      remark: '',
      pid: 0,
    };
    modalVisible.value = false;
  };
</script>

<style scoped lang="less"></style>
